<template>
	<view class="page">
		<view class="tabs">
			<view class="tabs-item" v-for="(tab, tabIndex) in tabList" :key="tabIndex" @click="selectTab(tabIndex)"
				:class="{ 'selected': activeTab === tabIndex }">
				<text style="color: white;">{{ tab.title }}</text>
				<view class="tabs-item-line" v-if="activeTab==tabIndex"></view>
				<!-- <view class="selected-count">{{ selectedCounts[tabIndex] ? selectedCounts[tabIndex] : 0 }}</view> -->
			</view>
		</view>
		<scroll-view scroll-y class="abc">
			<view scroll-y v-for="(tab, tabIndex) in tabs" :key="tabIndex" v-if="activeTab === tabIndex">
				<view class="all">
					<view class="txt">{{ tab.title1 }}</view>
					<view class="line"></view>
				</view>
				<view v-for="(tab, tabIndex) in tabs" :key="tabIndex" v-show="activeTab === tabIndex"
					class="context-box-item">
					<view v-for="(subTab, subTabIndex) in tab.subTabs1" :key="subTabIndex"
						@click="selectSubTab(tabIndex, subTabIndex, 'subTabs1')"
						:class="{ 'context_select': activeSubTab1[tabIndex] && activeSubTab1[tabIndex].includes(subTabIndex) }"
						class="context-box-item-chunk">
						<view class="context-box-item-chunk-title">{{ subTab.title }}</view>
					</view>
				</view>
			</view>
			<view v-for="(tab, tabIndex) in tabs" :key="tabIndex" v-if="activeTab === tabIndex">
				<view class="all">
					<view class="txt">{{ tab.title2 }}</view>
					<view class="line"></view>
				</view>
				<view scroll-y v-for="(tab, tabIndex) in tabs" :key="tabIndex" v-show="activeTab === tabIndex"
					class="context-box-item">
					<view v-for="(subTab, subTabIndex) in tab.subTabs2" :key="subTabIndex"
						@click="selectSubTab(tabIndex, subTabIndex, 'subTabs2')"
						:class="{ 'context_select': activeSubTab2[tabIndex] && activeSubTab2[tabIndex].includes(subTabIndex) }"
						class="context-box-item-chunk">
						<view class="context-box-item-chunk-title">{{ subTab.title }}</view>
					</view>
				</view>
			</view>
			<view v-for="(tab, tabIndex) in tabs" :key="tabIndex">
				<view class="all">
					<view class="txt">{{ tab.title3 }}</view>
					<view class="line"></view>
				</view>
				<view scroll-y v-for="(tab, tabIndex) in tabs" :key="tabIndex" class="context-box-item">
					<view v-for="(subTab, subTabIndex) in tab.subTabs3" :key="subTabIndex"
						@click="selectSubTab(tabIndex, subTabIndex, 'subTabs3')"
						:class="{ 'context_select': activeSubTab3[tabIndex] && activeSubTab3[tabIndex].includes(subTabIndex) }"
						class="context-box-item-chunk">
						<view class="context-box-item-chunk-title">{{ subTab.title }}</view>
					</view>
				</view>
			</view>
			<view v-for="(tab, tabIndex) in tabs" :key="tabIndex" v-if="activeTab === tabIndex">
				<view class="all">
					<view class="txt">{{ tab.title4 }}</view>
					<view class="line"></view>
				</view>
				<view v-for="(tab, tabIndex) in tabs" :key="tabIndex" v-show="activeTab === tabIndex"
					class="context-box-item">
					<view v-for="(subTab, subTabIndex) in tab.subTabs4" :key="subTabIndex"
						@click="selectSubTab(tabIndex, subTabIndex, 'subTabs4')"
						:class="{ 'context_select': activeSubTab4[tabIndex] && activeSubTab4[tabIndex].includes(subTabIndex) }"
						class="context-box-item-chunk">
						<view class="context-box-item-chunk-title">{{ subTab.title }}</view>
					</view>
				</view>
			</view>
			<view class="btn" v-show="!flag">
				<view class="button" @click="randomSelect" :style="{'background-color':'#3474FF'}">
					随机</view>
				<view style="height: 80rpx"></view>
			</view>
			<view class="btn" v-show="flag">
				<view class="button" @click="goToOtherPage" :style="{'background-color':'#3474FF'}">
					生成</view>
				<view style="height: 80rpx"></view>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				selectIndex: 1,
				scrollTabId: 'tabId0',
				selectedTabIndex: [],
				index: 0,
				activeTab: 0,
				activeSubTab: [],
				activeSubTab1: [],
				activeSubTab2: [],
				activeSubTab3: [],
				activeSubTab4: [],
				randomSubTab: [], // 随机选定的样式
				tabList: [{
						title: '常用',
						type: 0,
						list: []
					},
					{
						title: '人物',
						type: 1,
						list: []
					},
					{
						title: '角色',
						type: 2,
						list: []
					},
					{
						title: '五官',
						type: 3,
						list: []
					},
					{
						title: '表情',
						type: 4,
						list: []
					},
					{
						title: '头发',
						type: 5,
						list: []
					},
					{
						title: '装饰',
						type: 6,
						list: []
					},
					{
						title: '服装',
						type: 7,
						list: []
					},
					{
						title: '鞋饰',
						type: 8,
						list: []
					},
				],
				tabs: [{
						title: '镜头',
						subTabs: [{
								title: '大师作品'
							},
							{
								title: '最高画质'
							},
							{
								title: '高质量'
							},
							{
								title: '细节丰富'
							},
							{
								title: '4K'
							},
							{
								title: 'HDR'
							},
						],
						title1: '镜头视角',
						subTabs1: [{
								title: '大师作品'
							},
							{
								title: '最高画质'
							},
							{
								title: '高质量'
							},
							{
								title: '细节丰富'
							},
							{
								title: '4K'
							},
							{
								title: 'HDR'
							},
							{
								title: '景深'
							},
							{
								title: '全景'
							},
							{
								title: '长焦镜头'
							},
							{
								title: '微距镜头'
							},
							{
								title: '全身镜头'
							},
							{
								title: '中景镜头'
							},


						],
						title2: '镜头一',
						subTabs2: [{
								title: '精致的五官'
							},
							{
								title: '完美的脸'
							},
							{
								title: '发光皮肤'
							},
							{
								title: '抽象背景'
							},
							{
								title: '纯色背景'
							},
							{
								title: '渐变色背景'
							},
						],
						title3: '镜头二',
						subTabs3: [{
								title: '第一人称'
							},
							{
								title: '鱼眼镜头'
							},
							{
								title: '水下拍摄'
							},
						],
						title4: '镜头三',
						subTabs4: [{
								title: '七分身镜头'
							},
							{
								title: '半身像'
							},
							{
								title: '写实肖像'
							},
						],
					},
					{
						title: '人物一',
						subTabs: [{
								title: '女孩'
							},
							{
								title: '男孩'
							},
							{
								title: '正太'
							},
							{
								title: '萝莉'
							},
							{
								title: '美少女'
							},
							{
								title: '美少男'
							},
						],
						title1: '人物一',
						subTabs1: [{
								title: '公主'
							},
							{
								title: '王子'
							},
							{
								title: '新娘'
							},
							{
								title: '新郎'
							},
							{
								title: '肌肉男'
							},
							{
								title: '偶像'
							},
							{
								title: '兔女郎'
							},
							{
								title: '御姐'
							},
							{
								title: 'Q版人物'
							},
							{
								title: '女孩'
							},
							{
								title: '男孩'
							},
							{
								title: '正太'
							},
							{
								title: '萝莉'
							},
							{
								title: '美少女'
							},
							{
								title: '美少男'
							},
						],
						title2: '人物二',
						subTabs2: [{
								title: '老人'
							},
							{
								title: '小丑'
							},
							{
								title: '乞丐'
							},
							{
								title: '奴隶'
							},
							{
								title: '女王'
							},
							{
								title: '女神'
							},
						],
						title3: '人物三',
						subTabs3: [{
								title: '天使'
							},
							{
								title: '魔鬼'
							},
							{
								title: '怪物'
							},
						],
						title4: '数量',
						subTabs4: [{
								title: '多人'
							},
							{
								title: '单人'
							},
							{
								title: '双胞胎'
							},
						],
					},
					{
						title: '职业一',
						subTabs: [{
								title: '救生员'
							},
							{
								title: '拳击手'
							},
							{
								title: '科学家'
							},
							{
								title: '运动员'
							},
							{
								title: '修女'
							},
							{
								title: '护士'
							},
							{
								title: '空姐'
							},
							{
								title: '学生'
							},
							{
								title: '女服务员'
							},
							{
								title: '黑客'
							},
							{
								title: '魔术师'
							},
							{
								title: '侦探'
							},
							{
								title: '人偶'
							},
							{
								title: '飞行员'
							},
							{
								title: '潜水员'
							},
						],
						title1: '职业',
						subTabs1: [{
								title: '老师'
							},
							{
								title: '警察'
							},
							{
								title: '赛车手'
							},
							{
								title: '士兵'
							},
							{
								title: '啦啦队'
							},
							{
								title: '男演员'
							},
							{
								title: '女演员'
							},
							{
								title: '间谍'
							},
							{
								title: '特工'
							},
							{
								title: '刺客'
							},
							{
								title: '诗人'
							},
							{
								title: '特种兵'
							},
							{
								title: '日本武士'
							},
							{
								title: '舞女'
							},
							{
								title: '摩托车手'
							},
							{
								title: '消防员'
							},
							{
								title: '厨师'
							},
							{
								title: '宇航员'
							},
							{
								title: '收银员'
							},
							{
								title: '快递员'
							},
							{
								title: '咖啡师'
							},
							{
								title: '救生员'
							},
							{
								title: '拳击手'
							},
							{
								title: '科学家'
							},
							{
								title: '运动员'
							},
							{
								title: '修女'
							},
							{
								title: '护士'
							},
							{
								title: '空姐'
							},
							{
								title: '学生'
							},
							{
								title: '女服务员'
							},
							{
								title: '黑客'
							},
							{
								title: '魔术师'
							},
							{
								title: '侦探'
							},
							{
								title: '人偶'
							},
							{
								title: '飞行员'
							},
							{
								title: '潜水员'
							},
						],
						title2: '动漫一',
						subTabs2: [{
								title: '宝可梦'
							},
							{
								title: '泰迪熊'
							},
							{
								title: '马里奥'
							},
							{
								title: '原神'
							},
							{
								title: '皮卡丘'
							},
							{
								title: '熊出没'
							},
							{
								title: '骑士'
							},
							{
								title: '魔法少女'
							},
							{
								title: '半兽人'
							},
						],
						title3: '动漫二',
						// subTabs3: [{
						// 		title: '新世纪福音战士'
						// 	},
						// 	{
						// 		title: '初音未来'
						// 	},
						// 	{
						// 		title: '哈利波特'
						// 	},
						// 	{
						// 		title: '哆啦A梦'
						// 	},
						// 	{
						// 		title: '五条悟'
						// 	},
						// 	{
						// 		title: '复仇者联盟'
						// 	},
						// 	{
						// 		title: '德鲁伊'
						// 	},
						// 	{
						// 		title: '妖精'
						// 	},
						// 	{
						// 		title: '精灵'
						// 	},
						// ],
						title4: '动漫三',
						subTabs4: [{
								title: '钢铁侠'
							},
							{
								title: '超人'
							},
							{
								title: '蜡笔小新'
							},
							{
								title: '孙悟空'
							},
							{
								title: '女巫'
							},
							{
								title: '火影忍者'
							},
							{
								title: '美人鱼'
							},
							{
								title: '假面骑士'
							},
							{
								title: '魔法师'
							},
							{
								title: '蜘蛛侠'
							},
							{
								title: '圣诞老人'
							},
							{
								title: '海贼王'
							},
						],
					},
					{
						title: '眉毛',
						subTabs: [{
								title: '浓眉'
							},
							{
								title: '短眉毛'
							},
							{
								title: '眉毛翘起'
							},
							{
								title: 'V字眉'
							},
						],
						title1: '眼部',
						subTabs1: [{
								title: '大眼睛'
							},
							{
								title: '空洞眼神'
							},
							{
								title: '翻白眼'
							},
							{
								title: '猫眼'
							},
							{
								title: '布满血丝的眼'
							},
							{
								title: '发光眼睛'
							},
							{
								title: '吊眼角'
							},
							{
								title: '恶魔瞳孔'
							},
							{
								title: '收缩的瞳孔'
							},
							{
								title: '蛇瞳'
							},
							{
								title: '花型瞳'
							},
							{
								title: '爱心瞳'
							},
							{
								title: '异色瞳'
							},
							{
								title: '长睫毛'
							},
							{
								title: '彩色睫毛'
							},
							{
								title: '眼下痣'
							},
							{
								title: '浓眉'
							},
							{
								title: '短眉毛'
							},
							{
								title: '眉毛翘起'
							},
							{
								title: 'V字眉'
							},
							{
								title: '一字眉'
							},
						],
						title2: '嘴巴',
						subTabs2: [{
								title: '栗子嘴'
							},
							{
								title: '厚嘴唇'
							},
							{
								title: '嘟嘴'
							},
							{
								title: '嘴巴微张'
							},
							{
								title: '嘴下痣'
							},
							{
								title: '吐舌头'
							},
						],
						title3: '耳朵',
						subTabs3: [{
								title: '动物耳朵'
							},
							{
								title: '猫耳朵'
							},
							{
								title: '狗耳朵'
							},
							{
								title: '护理耳朵'
							},
							{
								title: '兔子耳朵'
							},
							{
								title: '熊耳朵'
							},
						],
						title4: '嘴部',
						subTabs4: [{
								title: '小胡子'
							},
							{
								title: '山羊胡'
							},
							{
								title: '长鬓角'
							},
							{
								title: '尖牙'
							},
							{
								title: '虎牙'
							},
							{
								title: '咬紧牙关'
							},
						],
					},
					{
						title: '表情一',
						subTabs: [{
								title: '无表情'
							},
							{
								title: '脸红'
							},
							{
								title: '尴尬'
							},
							{
								title: '傲慢'
							},
							{
								title: '郁闷'
							},
							{
								title: '畏缩'
							},
						],
						title1: '表情一',
						subTabs1: [{
								title: '烦恼'
							},
							{
								title: '疼痛'
							},
							{
								title: '叹息'
							},
							{
								title: '紧张'
							},
							{
								title: '害怕'
							},
							{
								title: '哭泣'
							},
							{
								title: '无表情'
							},
							{
								title: '脸红'
							},
							{
								title: '尴尬'
							},
							{
								title: '傲慢'
							},
							{
								title: '郁闷'
							},
							{
								title: '畏缩'
							},
						],
						title2: '表情二',
						subTabs2: [{
								title: '悲伤'
							},
							{
								title: '生气'
							},
							{
								title: '害羞'
							},
							{
								title: '严肃'
							},
							{
								title: '疯狂'
							},
							{
								title: '得意'
							},
						],
						title3: '表情三',
						subTabs3: [{
								title: '思考中'
							},
							{
								title: '皱眉'
							},
							{
								title: '调皮'
							},
						],
						title4: '表情四',
						subTabs4: [{
								title: '做鬼脸'
							},
							{
								title: '困倦'
							},
							{
								title: '微笑'
							},
							{
								title: '假笑'
							},
							{
								title: '单侧嘴角上杨'
							},
							{
								title: '大笑'
							},
						],
					},
					{
						title: '颜色',
						subTabs: [{
								title: '白发'
							},
							{
								title: '金发'
							},
							{
								title: '银发'
							},
							{
								title: '灰发'
							},
							{
								title: '棕发'
							},
							{
								title: '黑发'
							},
							{
								title: '紫发'
							},
							{
								title: '红发'
							},
							{
								title: '蓝发'
							},
							{
								title: '绿发'
							},
							{
								title: '粉发'
							},
							{
								title: '彩虹发色'
							},
						],
						title1: '颜色',
						subTabs1: [{
								title: '白发'
							},
							{
								title: '金发'
							},
							{
								title: '银发'
							},
							{
								title: '灰发'
							},
							{
								title: '棕发'
							},
							{
								title: '黑发'
							},
							{
								title: '紫发'
							},
							{
								title: '红发'
							},
							{
								title: '蓝发'
							},
							{
								title: '绿发'
							},
							{
								title: '粉发'
							},
							{
								title: '彩虹发色'
							},
						],
						title2: '发型',
						subTabs2: [{
								title: '莫西干头'
							},
							{
								title: '呆毛'
							},
							{
								title: '编制发簪'
							},
							{
								title: '盘发'
							},
							{
								title: '爆炸头'
							},
							{
								title: '秃头'
							},
							{
								title: '双丸子头'
							},
							{
								title: '寸头'
							},
							{
								title: '公主卷'
							},
							{
								title: '短马尾'
							},
							{
								title: '侧马尾辫'
							},
							{
								title: '双马尾'
							},
							{
								title: '麻花辫'
							},
							{
								title: '高马尾'
							},
							{
								title: '卷发'
							},
							{
								title: '直发'
							},
							{
								title: '波浪头'
							},
							{
								title: '波波头'
							},
							{
								title: '侧分'
							},
						],
						title3: '发饰',
						subTabs3: [{
								title: '发带'
							},
							{
								title: '头巾'
							},
							{
								title: '蝴蝶结'
							},
							{
								title: '洛丽塔发饰'
							},
							{
								title: '羽毛发饰'
							},
							{
								title: '头花'
							},
							{
								title: '发簪'
							},
							{
								title: '发箍'
							},
							{
								title: '发圈'
							},
							{
								title: '棒球帽'
							},
							{
								title: '渔夫帽'
							},
							{
								title: '贝雷帽'
							},
						],
						title4: '长度',
						subTabs4: [{
								title: '短发'
							},
							{
								title: '长发'
							},
							{
								title: '过肩长发'
							},
						],
					},
					{
						title: '装饰',
						subTabs: [{
								title: '手链'
							},
							{
								title: '项圈'
							},
							{
								title: '项链'
							},
							{
								title: '吊坠'
							},
							{
								title: '胸针'
							},
							{
								title: '圆形耳环'
							},
							{
								title: '手镯'
							},
							{
								title: '耳钉'
							},
							{
								title: '珍珠手链'
							},
							{
								title: '耳坠'
							},
						],
						title1: '装饰',
						subTabs1: [{
								title: '手链'
							},
							{
								title: '项圈'
							},
							{
								title: '项链'
							},
							{
								title: '吊坠'
							},
							{
								title: '胸针'
							},
							{
								title: '圆形耳环'
							},
							{
								title: '手镯'
							},
							{
								title: '耳钉'
							},
							{
								title: '珍珠手链'
							},
							{
								title: '耳坠'
							},
						],
						title2: '配饰二',
						subTabs2: [{
								title: '创可贴'
							},
							{
								title: '雨衣'
							},
							{
								title: '独眼眼罩'
							},
							{
								title: '丝带'
							},
							{
								title: '裙撑'
							},
							{
								title: '护手'
							},
							{
								title: '臂带'
							},
						],
						title3: '配饰三',
						subTabs3: [{
								title: '太阳镜'
							},
							{
								title: '无边框镜'
							},
							{
								title: '口罩'
							},
						],
						title4: '配饰四',
						subTabs4: [{
								title: '细肩带'
							},
							{
								title: '面纱'
							},
							{
								title: '皇冠'
							},
						],
					},
					{
						title: '服装一',
						subTabs: [{
								title: '背心'
							},
							{
								title: '白衬衫'
							},
							{
								title: '毛衣'
							},
							{
								title: '夏日长裙'
							},
							{
								title: '连帽衫'
							},
							{
								title: '兜帽斗篷'
							},
							{
								title: '哥特风格'
							},
							{
								title: '洛丽塔风格'
							},
							{
								title: '腰带'
							},
							{
								title: '围巾'
							},
							{
								title: '披肩'
							},
							{
								title: '金属盔甲'
							},
							{
								title: '露单肩'
							},
							{
								title: '露双肩'
							},
							{
								title: '吊带'
							},
						],
						title1: '服装一',
						subTabs1: [{
								title: '牛仔夹克'
							},
							{
								title: '高领夹克'
							},
							{
								title: '战壕风衣'
							},
							{
								title: '燕尾服'
							},
							{
								title: '女仆装'
							},
							{
								title: '水手服'
							},
							{
								title: '职场制服'
							},
							{
								title: '西装'
							},
							{
								title: '礼服'
							},
							{
								title: '汉服'
							},
							{
								title: '旗袍'
							},
							{
								title: '和服'
							},
							{
								title: '背心'
							},
							{
								title: '白衬衫'
							},
							{
								title: '毛衣'
							},
							{
								title: '夏日长裙'
							},
							{
								title: '连帽衫'
							},
							{
								title: '兜帽斗篷'
							},
							{
								title: '哥特风格'
							},
							{
								title: '洛丽塔风格'
							},
							{
								title: '腰带'
							},
							{
								title: '围巾'
							},
							{
								title: '披肩'
							},
							{
								title: '金属盔甲'
							},
							{
								title: '露单肩'
							},
							{
								title: '露双肩'
							},
							{
								title: '吊带'
							},
						],
						title2: '服装二',
						subTabs2: [{
								title: '运动服'
							},
							{
								title: '工装服'
							},
							{
								title: '围裙'
							},
							{
								title: '健身服'
							},
							{
								title: '连衣裙'
							},
							{
								title: '婚纱'
							},
							{
								title: '实验室外套'
							},
							{
								title: '防弹衣'
							},
							{
								title: '吉利服'
							},
						],
						title3: '服装三',
						subTabs3: [{
								title: '棒球帽'
							},
							{
								title: '针织帽'
							},
							{
								title: '拿破仑帽'
							},
							{
								title: '太阳帽'
							},
							{
								title: '遮阳帽'
							},
							{
								title: '圆顶礼帽'
							},
							{
								title: '侦探帽子'
							},
							{
								title: '牛仔帽'
							},
							{
								title: '厨师帽'
							},
						],
						title4: '服装四',
						subTabs4: [{
								title: '圣诞帽'
							},
							{
								title: '小丑帽'
							},
							{
								title: '安全帽'
							},
							{
								title: '棒球头盔'
							},
							{
								title: '橄榄球头盔'
							},
							{
								title: '女巫帽'
							},
							{
								title: '贝雷帽'
							},
							{
								title: '鸭舌帽'
							},
							{
								title: '草帽'
							},
						],
					},
					{
						title: '鞋饰一',
						subTabs: [{
								title: '裸足'
							},
							{
								title: '靴子'
							},
							{
								title: '马丁靴'
							},
							{
								title: '系鞋带'
							},
							{
								title: '过膝靴'
							},
							{
								title: '防水橡胶靴'
							},
						],
						title1: '鞋饰一',
						subTabs1: [{
								title: '皮靴'
							},
							{
								title: '雪地靴'
							},
							{
								title: '圣诞靴'
							},
							{
								title: '裸足'
							},
							{
								title: '靴子'
							},
							{
								title: '马丁靴'
							},
							{
								title: '系鞋带'
							},
							{
								title: '过膝靴'
							},
							{
								title: '防水橡胶靴'
							},
						],
						title2: '鞋饰二',
						subTabs2: [{
								title: '芭蕾舞鞋'
							},
							{
								title: '运动鞋'
							},
							{
								title: '旱冰鞋'
							},
						],
						title3: '鞋饰三',
						subTabs3: [{
								title: '旱冰鞋'
							},
							{
								title: '高跟鞋'
							},
							{
								title: '凉鞋'
							},
							{
								title: '木屐'
							},
						],
						title4: '袜类',
						subTabs4: [{
								title: '短袜'
							},
							{
								title: '丝袜'
							},
							{
								title: '圣诞袜'
							},
							{
								title: '过膝袜'
							},
							{
								title: '渔网袜'
							},
							{
								title: '吊带袜'
							},
							{
								title: '连裤袜'
							},
							{
								title: '船袜'
							},
							{
								title: '长袜'
							},
						],
					},
				],
				selectedTitle: [], // 存储选定的子元素的 title
				randomSelectedTitles: [], // 存储随机选定的子元素
				flag: false,
				tag: 0,
				selectedCounts: {}, // 存储每个tab下选定的子元素数量
			}
		},

		onLoad() {
			// 返回的时候把随机元素设为NULL
			this.randomSelectedTitles = null
		},
		methods: {
			selectTab(index) {
				this.activeTab = index;
			},
			// 手动选定元素
			selectSubTab(tabIndex, subTabIndex, subTabType) {
				let count1 = []
				let count2 = []
				let count3 = []
				let count4 = []
				let activeSubTab;
				switch (subTabType) {
					case 'subTabs1':
						// count1.push(subTabIndex)
						activeSubTab = this.activeSubTab1;
						break;
					case 'subTabs2':
						// count2.push(subTabIndex)
						activeSubTab = this.activeSubTab2;
						break;
					case 'subTabs3':
						// count3.push(subTabIndex)
						activeSubTab = this.activeSubTab3;
						break;
					case 'subTabs4':
						// count4.push(subTabIndex)
						activeSubTab = this.activeSubTab4;
						break;
					default:
						activeSubTab = this.activeSubTab;
						break;
				}

				if (!activeSubTab[tabIndex]) {
					this.$set(activeSubTab, tabIndex, []);
				}

				const index = activeSubTab[tabIndex].indexOf(subTabIndex);
				if (index > -1) {
					activeSubTab[tabIndex].splice(index, 1);
				} else {
					activeSubTab[tabIndex].push(subTabIndex);
				}
				console.log('222', activeSubTab[tabIndex]);
				console.log('333', activeSubTab[tabIndex].length);
				// 更新选定的子元素的 title 数组
				this.updateSelectedTitles();
				// 更新选定的子元亲微量
				//   this.updateSelectedCounts(tabIndex);
			},

			updateSelectedTitles() {
				this.selectedTitles = [];
				this.tabs.forEach((tab, tabIndex) => {
					Object.keys(tab).forEach((subTabType) => {
						const activeSubTab = this.getSubTabArray(subTabType, tabIndex);
						activeSubTab.forEach((subTabIndex) => {
							const selectedSubTab = this.tabs[tabIndex][subTabType][subTabIndex];
							this.selectedTitles.push(selectedSubTab.title);
						});
					});
				});
			},
			// 选定的元素传递给绘画页面使用
			getSubTabArray(subTabType, tabIndex) {
				this.flag = true;
				let activeSubTab;
				switch (subTabType) {
					case 'subTabs1':
						activeSubTab = this.activeSubTab1;
						break;
					case 'subTabs2':
						activeSubTab = this.activeSubTab2;
						break;
					case 'subTabs3':
						activeSubTab = this.activeSubTab3;
						break;
					case 'subTabs4':
						activeSubTab = this.activeSubTab4;
						break;
					default:
						activeSubTab = this.activeSubTab;
						break;
				}
				const tag = this.selectedTitles.length
				return activeSubTab[tabIndex] || [];
			},

			// 随机选中
			randomSelect() {
				this.randomSelectedTitles = []
				// 生成一个包含所有子选项索引的数组
				const allSubTabIndices = [];
				this.tabs.forEach((tabs) => {
					allSubTabIndices.push(...tabs.subTabs.map((subTab) => subTab.title));
				});
				// 随机选定三个不重复的索引
				const randomIndices = [];
				const targetLength = Math.floor(Math.random() * 10) + 1; // 生成一个1到10之间的随机目标长度
				while (randomIndices.length < targetLength) {
					const randomIndex = Math.floor(Math.random() * allSubTabIndices.length);
					if (!randomIndices.includes(randomIndex)) {
						randomIndices.push(randomIndex);
					}
				}
				// 清空之前的随机选定样式
				this.randomSubTab = [];

				// 根据随机索引设置随机选定样式
				randomIndices.forEach((randomIndex) => {
					this.randomSubTab.push(randomIndex);
				});
				this.selectedTitle = randomIndices.map((index) => allSubTabIndices[index]);
				console.log(this.randomSelectedTitles,'=======')
				uni.navigateTo({
					// url: `/pages/AiDraw/AiDraw?selectedTitle=${this.selectedTitles}&randomSelectedTitles=${this.randomSelectedTitles}`,
					url: '/pages_aiTools/Aidram/Aidram?title=' + JSON.stringify(this.selectedTitle),
				});
				// 更新随机选定的子元素数组
				//   this.updateRandomSelectedTitles();
				// this.goToOtherPage()
			},
			isSubTabActive(tabIndex, subTabIndex) {
				return (
					(this.activeSubTab[tabIndex] && this.activeSubTab[tabIndex].includes(subTabIndex)) ||
					this.randomSubTab.includes(tabIndex * this.tabs[tabIndex].subTabs.length + subTabIndex)
				);
			},
			getSubTabStyle(tabIndex, subTabIndex) {
				const isActive = this.isSubTabActive(tabIndex, subTabIndex);
				const style = {};
				if (isActive) {
					style.backgroundColor = '#3474FF;';
				}
				return style;
			},
			// 页面跳转
			goToOtherPage() {
				console.log(this.selectedTitle,'==00000')
				
				const params = {
					selectedTitle: this.selectedTitles,
					// randomSelectedTitles: this.randomSelectedTitles,
				};
				console.log("🚀 ~ file: incantation.vue:885 ~ goToOtherPage ~ params:", params)
				// let title = JSON.parse(params)
				uni.navigateTo({
					// url: `/pages/AiDraw/AiDraw?selectedTitle=${this.selectedTitles}&randomSelectedTitles=${this.randomSelectedTitles}`,
					url: '/pages_aiTools/Aidram/Aidram?title=' + JSON.stringify(this.selectedTitles),
				});
			},
			serializeParams(params) {
				// 将参数对象序列化为 URL 参数字符串
				return Object.keys(params)
					.map((key) => encodeURIComponent(key) + '=' + encodeURIComponent(params[key]))
					.join('&');
			},
			getSelectedCount(tabIndex) {
				let activeSubTab;
				switch (tabIndex) {
					case 0:
						activeSubTab = this.activeSubTab;
						break;
					case 1:
						activeSubTab = this.activeSubTab1;
						break;
					case 2:
						activeSubTab = this.activeSubTab2;
						break;
					case 3:
						activeSubTab = this.activeSubTab3;
						break;
					case 4:
						activeSubTab = this.activeSubTab4;
						break;
					default:
						activeSubTab = this.activeSubTab;
						break;
				}
				return activeSubTab[tabIndex] ? activeSubTab[tabIndex].length : 0;
			},
		},
		computed: {

			sidebarItems() {
				return this.tabs.map((tab, tabIndex) => {
					const selectedCount = this.getSelectedCount(tabIndex);
					return {
						title: tab.title,
						selectedCount: selectedCount,
					};
				});
			},
		},
	}
</script>
<style lang="less">
	.page {
		display: flex;
		width: 100%;
		height: calc(100vh);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-image: url("https://www.qianfanwanmu.com/extra/addExtra/1687680890773.png");

	}

	.selected-count {}

	.abc {
		width: 590rpx;
		padding-bottom: 260rpx;
	}

	.tabs {
		display: flex;
		padding: 10px;
		cursor: pointer;
	}

	.all {
		display: flex;
		position: relative;
		padding: 22rpx 30rpx 0 30rpx;

		.txt {
			display: inline-block;
		}

		.line {
			position: absolute;
			width: 394rpx;
			height: 1rpx;
			right: 30rpx;
			top: 44rpx;
			background: #3474FF;
		}
	}

	.tabs {
		width: 100rpx;
		height: 1189rpx;
		background-color: #3474FF;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;

		.scroll-X {
			width: 100%;
			height: 100%;
			white-space: nowrap;

			.tabs-item {
				height: 100%;
				padding: 0rpx 40rpx;
				color: #8b8b8b;
				display: inline-block;
				line-height: 100rpx;
				position: relative;
			}

			.tabs-item-select {
				color: #333333;
			}
		}
	}

	.tabs-item-line {
		width: 60rpx;
		height: 6rpx;
		position: absolute;
		// left: 50%;
		left: 9%;
		transform: translateX(-50%);
		//   background-color: #4BB591;
		background-color: #3474ff;
	}

	.context {
		width: 100%;
		//   height: calc(100vh - 100rpx);
		//   background-color: #f7f7f7;
		box-sizing: border-box;
		margin-bottom: 90px;

		.swiper {
			width: 100%;
			height: 100%;

			.scroll-Y-chunk {
				width: 100%;
				height: 100%;

				.all {
					position: relative;

					.line {
						position: absolute;
						bottom: 10px;
						left: 30%;
						width: 394rpx;
						height: 1rpx;
						background: #3474FF;
						display: inline-block;
					}

					.txt {
						width: 122rpx;
						height: 28rpx;
						font-size: 29rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
						margin-left: 30rpx;
						display: inline-block;
					}
				}

				.context-box-item {
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					align-content: flex-start;
					box-sizing: border-box;
					padding: 22rpx 30rpx 0 30rpx;

					.context-box-item-chunk {
						width: 169rpx;
						height: 70rpx;
						background-color: #f7f7f7;
						margin-bottom: 30rpx;
						box-sizing: border-box;
						padding-left: 40rpx;
						border: 1rpx solid #3473ff;

						.context-box-item-chunk-image {
							width: 100%;
							display: flex;
							align-items: center;
							margin-top: 30rpx;

							.context-box-item-chunk-image-shadow {
								padding: 6rpx;
								background-color: #e5e0e0;
								border-radius: 50%;
								display: flex;
								justify-content: center;
								align-items: center;
							}
						}

						.context-box-item-chunk-title {
							width: 100%;
							color: #333333;
							font-size: 28rpx;
							margin-top: 20rpx;
							border: 1px solid #3473ff;
							border-radius: 15rpx;
						}

						.context-box-item-chunk-text {
							width: 100%;
							font-size: 22rpx;
							color: #939393;
							margin-top: 20rpx;
							box-sizing: border-box;
							padding-right: 20rpx;
						}
					}
				}
			}
		}
	}

	.context-box-item {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-content: flex-start;
		box-sizing: border-box;
		padding: 22rpx 30rpx 0 30rpx;
	}

	.context-box-item-chunk {
		width: 169rpx;
		height: 70rpx;
		border-radius: 12rpx;
		background-color: #f7f7f7;
		margin-bottom: 30rpx;
		box-sizing: border-box;
		//   padding-left: 40rpx;
		//   box-shadow: 1px 1px 8px 2px #e4ecf1;
	}

	.context-box-item-chunk-title {
		width: 100%;
		color: #333333;
		font-size: 28rpx;
		//   margin-top: 16rpx;
		text-align: center;
		line-height: 36px;
	}

	.btn {
		display: flex;
		position: fixed;
		flex-direction: row;
		//   background-color: rgba(211, 238, 255, 1);
		border-radius: 25px 25px 0 0;
		width: 100%;
		bottom: 0px;
		z-index: 99;
		margin-left: -20px;
		height: 250rpx;
	}

	.button {
		width: 463rpx;
		height: 90rpx;
		background-color: rgba(52, 116, 255, 0.3);
		border-radius: 60rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 30rpx;
		margin: 80rpx 80rpx;
	}

	.context_select {
		background-color: #3474FF !important;
		border-radius: 12rpx;
	}

	/deep/::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
		color: transparent;
	}
</style>